<div class="donation-card">
    <mat-icon
        class="open"
        *ngIf="!isOpen"
        (click)="toggle()"
        matTooltip="{{ 'donationPanel.openTip' | translate }}"
        >radio_button_checked</mat-icon
    >

    <mat-card class="card" *ngIf="isOpen">
        <mat-icon class="close" (click)="toggle()">close</mat-icon>
        <mat-card-content>
            <div class="title">{{ 'donationPanel.title' | translate }}</div>
            <div class="subtitle">{{ 'donationPanel.des' | translate }}</div>
            <div class="last-date">
                {{ 'donationPanel.updateTime' | translate }} :
                {{ updateAt }}
            </div>
            <div
                class="progress-bg"
                matTooltip="{{ 'donationPanel.title' | translate }}"
            >
                <div
                    class="progress-bar"
                    [ngStyle]="{ width: progressWidth }"
                ></div>
                <span class="progress-percent">{{ progressPercent }}</span>
            </div>
            <div class="support">{{ supportProgress }}</div>
        </mat-card-content>
    </mat-card>
</div>
